<template>
    <div class="app-container">
        <div class="flex-vhc">
            <el-button type="primary" icon="Plus" @click="openUpload">上传组织架构图片</el-button>
        </div>
        <el-image :src="infoPic" :preview-src-list="[infoPic]" fit="cover">
            <template #error>
                <div class="flex-vhc" style="margin:0 auto">
                    <div class="flex-vhc image-slot">
                        <el-icon size="100" color="#DDDDDD"> <icon-picture /> </el-icon>
                    </div>
                </div>
            </template>
        </el-image>

        <el-dialog v-model="isShowDialog" width="700px" append-to-body title="上传">
            <el-form ref="dialogFormRef" label-width="120px" style="padding-left: 60px;" :validate-on-rule-change="false">
                <el-form-item label="文件" prop="validity">
                    <ImageUpload v-model="dialogPics" :limit="1" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submit">提 交</el-button>
                    <el-button @click="isShowDialog = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
 
<script setup name="User">
import { Picture as IconPicture } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance();

const infoPic = ref('');
const isShowDialog = ref(false);
const dialogPics = ref([])

const openUpload = () => {
    dialogPics.value = []
    isShowDialog.value = true
}

const submit = () => {
    if (dialogPics.value.length == 0) {
        proxy.$modal.msgError("请上传文件");
        return
    }
}

</script>
 

<style lang="scss" scoped>
.app-container {
    padding-top: 40px;
}

.el-image {
    width: 100%;
    margin-top: 30px;
}

.image-slot {
    width: 500px;
    min-height: 400px;
    margin: 0 auto;
    cursor: pointer;
    border: 1px #ddd solid;
    border-radius: 10px;
    background: #f7f7f7;
}
</style>